src/app/(main)/teams/[teamId]/TeamDeleteForm.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import { TypeConfirmationForm } from '@/components/common/TypeConfirmationForm';
import { useDeleteQuery, useMessages } from '@/components/hooks';

const CONFIRM_VALUE = 'DELETE';

export function TeamDeleteForm({
  teamId,
  onSave,
  onClose,
}: {
  teamId: string;
  onSave?: () => void;
  onClose?: () => void;
}) {
  const { labels, formatMessage, getErrorMessage } = useMessages();
  const { mutateAsync, error, isPending, touch } = useDeleteQuery(`/teams/${teamId}`);

  const handleConfirm = async () => {
    await mutateAsync(null, {
      onSuccess: async () => {
        touch('teams');
        touch(`teams:${teamId}`);
        onSave?.();
        onClose?.();
      },
    });
  };

  return (
    <TypeConfirmationForm
      confirmationValue={CONFIRM_VALUE}
      onConfirm={handleConfirm}
      onClose={onClose}
      isLoading={isPending}
      error={getErrorMessage(error)}
      buttonLabel={formatMessage(labels.delete)}
      buttonVariant="danger"
    />
  );
}